<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="nav">
			<u-subsection :list="list" @change="sectionChange" :current="current"></u-subsection>
		</view>
		<u-gap height="70"></u-gap>
		<view v-if="current == 0">
			<view class="tips">我的押瓶数量：<text class="col">3</text></view>
			<view class="list">
				<view class="item" v-for="(item, index) in 3">
					<template>
						<view class="name">
							序号：{{index+1}}
						</view>
						<view class="text">
							首次押瓶时间：2022-07-28
						</view>
					</template>
				</view>
			</view>
		</view>
		
		<view  v-if="current == 1">
			<view class="tips flex">
				<text>押瓶租金：<text class="col-red">1.5元/月</text></text>
				<text class="col">租金结算规则</text>
			</view>
			<view class="log-list">
				<view class="item" v-for="(item, index) in 4">
					<view class="top">
						<view class="type">
							欠费类型：2022上半年度租金结算
						</view>
						<view>
							<u-tag text="欠费" v-if="index== 0" type='error' mode="light" />
							<u-tag text="已缴" v-else mode="light" />
						</view>
					</view>
					<view class="num">
						押瓶数量：3
					</view>
					<view class="desc">
						<view class="date">
						缴租区间：2022.01.01~2022.06.30
						</view>
						<view class="price">￥<text>99</text></view>
					</view>
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				list: [{
						name: '押瓶记录'
					},
					{
						name: '租金结算记录'
					},
				],
				current: 0,
			};
		},
		onLoad(o) {
			that = this;
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			sectionChange(e){
				this.current = e;
			},
			submit() {
				uni.$emit('selectBill', this.list[this.current]);
				this.$common.goback();
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	.nav{
		position: fixed;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 99;
	}
	page {
		background-color: #F8FAFD;
	}

	.list {
		.item {
			background: #fff;
			padding: 20rpx 30rpx;
			border: 2px solid #fff;
			overflow: hidden;
			position: relative;
			border-bottom: 1px solid #ddd;
			&:nth-last-child(1){
				border: 0;
			}
			.icons {
				position: absolute;
				right: 0;
				padding: 2px 5px;
				background: $color;
				bottom: 0;
				display: none;
			}

			&.active {
				.icons {
					display: block;
				}

				border-color: $color;
			}
		}

		.name {
			font-size: 14px;
			margin-bottom: 6px;
			font-weight: bold;
		}

		.text {
			margin-bottom: 6px;
		}
	}
	
	.tips{
		padding: 0 30rpx;
		background: #fff;
		height: 70rpx;
		line-height: 70rpx;
		color: #666;
		border-bottom: 12rpx solid #f5f5f5;
		&.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	
	.log-list{
		.item{
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #ddd;
			background: #fff;
			&:nth-last-child(1){
				border: 0;
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.num{
			font-size: 13px;
			padding: 2px 0;
		}
		.desc{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 13px;
		}
	}
</style>